<template>
	<div style="background: #f0f0f0">
		<div class="top">
			<router-link to="">商品</router-link>
			<router-link to="">详情</router-link>
			<router-link to="">评价</router-link>
		</div>
		<!-- 轮播 -->
		<div class="lunbo">
			<van-swipe :height="400" @change="onChange">
				<van-swipe-item>
					<img :src="require('../assets/shan-2.jpg')" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img :src="require('../assets/shan-3.jpg')" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img :src="require('../assets/shan-4.jpg')" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img :src="require('../assets/shan-5.jpg')" alt="" />
				</van-swipe-item>
				<template #indicator>
					<div class="custom-indicator">{{ current + 1 }}/4</div>
				</template>
			</van-swipe>
		</div>
		<!-- 介绍 -->
		<div class="detail-box">
			<h4>
				俞兆林卫衣 男2017春新款运动休闲印花大码潮人卫衣卫裤加厚外套套装男<br />
				<p>
					<b class="b">¥296.00</b>
					<br />
					<span class="b-span"
						>【2017春季全场2件8】春款薄绒休闲套头纯色印花连帽大码卫衣套装新款上新！！</span
					>
				</p>
			</h4>
		</div>
		<!-- 优惠 -->
		<div class="hui">
			<div class="hui-con">
				<div class="hui-l">
					<p>优惠</p>
				</div>
				<div class="hui-r">
					<i>
						<span><a class="a1" href="">优惠券</a> </span>
						<span>满197.00减40.00</span>
					</i>
					<br />
					<i>
						<span><a class="a1" href="">优惠券</a> </span>
						<span>满197.00减40.00</span>
					</i>
					<br />
					<a class="a" href="">去领券</a>
				</div>
			</div>
		</div>
		<!-- 尺码颜色 -->
		<div class="wy-media-box2">
			<div class="wy-media-box2-top">
				<div class="wy-media-box2-l">尺码</div>
				<div class="wy-media-box2-r">
					<a href="">25</a>
					<a href="">25</a>
					<a href="">25</a>
					<a href="">25</a>
					<a href="">25</a>
					<a href="">25</a>
				</div>
			</div>
			<!-- 底部 -->
			<div class="wy-media-box2-bot">
				<div class="wy-media-box2-l">颜色</div>
				<div class="wy-media-box2-r-1">
					<a href="">黑色</a>
					<a href="">黑色</a>
					<a href="">黑色</a>
					<a href="">黑色</a>
					<a href="">黑色</a>
					<a href="">黑色</a>

					<!-- <a href="">25</a> -->
				</div>
			</div>
		</div>
		<!-- 地址 -->
		<div class="add">
			<div class="add-con">
				<p>
					<van-col span="3">送至</van-col>
					江苏&nbsp;&nbsp;&nbsp;宿迁&nbsp;&nbsp;&nbsp;洋河&nbsp;&nbsp;&nbsp;新区
				</p>
				<p><van-col span="3">送至</van-col>&nbsp;&nbsp;&nbsp;&nbsp;免运费</p>
				<p><van-col span="3">商家</van-col>蓝之蓝股份有限公司</p>
				<p><van-col span="3">提升</van-col>支持7天无理由退换货</p>
			</div>
		</div>
		<!-- 提交 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
			<van-goods-action-icon icon="cart-o" text="购物车" />
			<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
			<van-goods-action-button type="warning" text="加入购物车" />
			<van-goods-action-button type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>
<style scoped lang="scss">
.top {
	width: 100%;
	position: fixed;
	top: 0;
	background: rgb(240, 240, 240);
	// height: 33px;
	display: flex;
	z-index: 99;
	justify-content: space-around;
	border-bottom: 1px rgb(196, 196, 196) solid;
	line-height: 43px;
	a {
		line-height: 33px;
		color: grey;
	}
}
.lunbo {
	height: 400px;
}
.custom-indicator {
	position: absolute;
	right: 5px;
	bottom: 5px;
	padding: 2px 5px;
	font-size: 12px;
	background: rgba(0, 0, 0, 0.1);
}
.detail-box {
	width: 100%;
	background: white;
	border-bottom: 1px rgb(167, 162, 162) solid;
}
h4 {
	width: 98%;
	margin: 0 auto;
	font-weight: 200;
	font-size: 0.9rem;
}
.b {
	color: red;
	font-size: 1.3rem;
}
.b-span {
	font-weight: 200;
	font-size: 0.9rem;
}
.hui {
	width: 100%;
	background: white;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	border-top: 1px rgb(182, 175, 175) solid;
	border-bottom: 1px rgb(182, 175, 175) solid;
}
.hui-con {
	width: 50%;
	display: flex;
	justify-content: space-around;
	// background: rgb(144, 165, 88);
}
.hui-l {
	width: 20%;

	// background: pink;
	p {
		line-height: 30px;
		text-align: center;
	}
}
.a1 {
	padding: 0.2rem;
	font-size: 0.5rem;
	border: 1px red solid;
	color: red;
}
.hui-r {
	font-size: 0.5rem;
	// background: rgb(255, 242, 246);
	i {
		display: block;
		padding-top: 0.1rem;
	}
	.a {
		padding: 0.2rem;
		font-size: 0.5rem;
		background: red;
		color: white;
	}
}
.wy-media-box2 {
	width: 100%;
	background: white;
	padding-bottom: 10px;
	border-bottom: 1px rgb(182, 175, 175) solid;
}
.wy-media-box2-top {
	width: 60%;
	// background: pink;
	margin-top: 15px;
	margin-left: 15px;
	// margin: 0 auto;
	display: flex;
	justify-content: space-around;
	.wy-media-box2-l {
		// width: 16%;
		color: grey;
		// background: rgb(119, 96, 100);
	}
}
.wy-media-box2-bot {
	width: 80%;
	// background: pink;
	margin-top: 15px;
	margin-left: 15px;
	// margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
.wy-media-box2-r {
	// width: 60%;

	display: flex;
	// flex-wrap: wrap;
	justify-content: space-around;
	a {
		margin-left: 5px;
		display: block;
		padding: 5px;
		border: 1px solid #ddd;
		border-radius: 3px;
		background-color: #fff;
	}
}
.wy-media-box2-r-1 {
	width: 90%;
	font-size: 0.2rem;
	// background: rgb(202, 87, 87);
	display: flex;
	// flex-wrap: wrap;
	justify-content: space-around;
	a {
		margin-left: 5px;
		display: block;
		padding: 5px;

		border: 1px solid #ddd;
		border-radius: 3px;
		background-color: #fff;
	}
}
.add {
	margin-top: 10px;
	width: 100%;
	background: white;
	font-size: 0.8rem;
	color: #222;
	padding-bottom: 10px;
	border-top: 1px rgb(182, 175, 175) solid;
	border-bottom: 1px rgb(182, 175, 175) solid;
	.add-con {
		width: 94%;
		margin: 0 auto;
	}
}
.van-col {
	color: #81838e;
}
</style>
<script>
export default {
	data() {
		return {
			current: 0,
		}
	},
	methods: {
		onChange(index) {
			this.current = index
		},
	},
}
</script>